---
import BasePage from './BasePage.astro'
import Like from '../components/Like.vue'

export interface Props {
  content: {
    title: string
    description: string
    pubDate: string
    author: string
    heroImage?: string
  }
}

const {
  content: { title, description, pubDate, author, heroImage }
} = Astro.props
---

<BasePage title={title} description={description}>
  <article>
    {
      heroImage && (
        <img
          width={720}
          height={360}
          src={heroImage}
          alt=""
          class="mt-10px mb-12px box-border w-100% h-auto rounded-10px shadow-lg hover:shadow-xl transition-220"
        />
      )
    }
    <h1 class="text-2em m-0.25em ml-0 mr-0">
      {title}
    </h1>
    <time>{pubDate}</time>
    <p class="flex items-center mt-8px">
      <span class="text-1.1em">{author}</span>
      <span class="ml-3px i-tabler-ballpen transition-160 hover:rotate--15"></span>
    </p>
    <br />
    <slot />
  </article>
  <br />
  <Like name={title} client:idle />
</BasePage>
